<script setup>
import { onMounted, ref, watch } from 'vue'
import { darkTheme } from 'naive-ui'
import { useThemeSwitchStore } from '@/stores';
import { storeToRefs } from 'pinia';

const { active } = storeToRefs(useThemeSwitchStore())
const theme = ref(null)
watch(
  () => active.value,
  (newValue) => { 
    if (newValue === true) {
      theme.value = darkTheme
    } else { 
      theme.value = null
    }
  }
)


</script>

<template>
  <n-config-provider :theme="theme">

    <n-card style="--n-padding-bottom:0px;--n-padding-left:0px">
      <!-- <n-button @click="theme = darkTheme">深色</n-button>
      <n-button @click="theme = null">浅色</n-button> -->
      <div class="container">
        <router-view></router-view>
      </div>
    </n-card>

  </n-config-provider>
</template>

<style scoped lang="scss"></style>